<template>
  <div class="container">
    <h3>国际化</h3>
    <div>{{ $t("message.hello") }}</div>
    <div>{{ $t("user") }}</div>
    <div>
      <el-select v-model="locale" @change="changeLang">
        <el-option
          v-for="item in langOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button>{{ $t("user") }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "I18n",
  data() {
    return {
      btnLabel: "按钮",
      locale: "zh",
      langOptions: [
        { value: "zh", label: "中文" },
        { value: "en", label: "English" },
      ],
    };
  },
  methods: {
    changeLang(l) {
      this.$i18n.locale = l;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
}
</style>
